<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旅游网</title>
	<link rel="stylesheet" href="css/slider.css">
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background: #c4e8ff;
		}
		nav{
			width: 100%;
			height: 40px;
			background: #002b49;
			overflow: hidden;
		}
		nav ul li{
			list-style: none;
			float: left;
			width: 13%;
			text-align: center;
			font-weight: bold;
			line-height: 37px;
			font-family: "微软雅黑";
			

		}
		nav li:hover{
			width: 13%;
			height: 40px;
            background-color: #008ace;
		}
		nav li:hover a{
			color:#202020;
		}
		nav li a{
			width: 100%;
			height: 100px;
			display: inline-block;
			text-decoration: none;
			color: #fff;
		}
		.beijing{
			    height: 391px;
			    width: 100%;
				background: url('imgs/2.jpg') center top  no-repeat;
				position: relative;
		}
		.beijing span{
			display: block;
			position: absolute;
			top: 40px;
			right: 70px;
			font-size: 56px;
			font-family: "微软雅黑";
			color: #fff;
			text-shadow: 2px 2px 5px #333;
		}
		.head{
			width:1230px;
			height:320px;
			overflow: hidden;
			margin:0 auto;
			margin-top: 20px;
			position: relative;
		}
		.containter{
			height: 460px;
			width: 1230px;
			overflow: hidden;
			margin: 0 auto;
			margin-top: 20px;
		}
		.leftblock{
			width: 220px;
			height: 320px;
			float: left;
			margin-right: 10px;
			overflow: hidden;
			background:#00416c;
		}
		.leftblock h2{
			margin: 0 10px 0 10px;
			padding-left: 10px;
			color: #7dc7fa;
			border-bottom: 1px solid #21638e;
			font-size: 18px;
			font-weight: bold;
			font-family: "微软雅黑";
			line-height: 60px;

		}
		.leftblock li a{
			line-height: 33px;
			color: white;
			padding-left: 18px;
			text-decoration: none;
		}
		.leftblock li {
			padding: 4px 0px;
			padding-left: 18px;
			display: list-item;
		}
		.all{
			width: 690px;
			height: 320px;
			z-index: 1;
			position: relative;
		}
		.book{
			width: 290px;
			height: 320px;
			position: absolute;
			right: 0px;
			top: 0px;
			display: block;
			z-index: 3;
		}
		.book h2{
			line-height: 36px;
			font-size: 18px;
			font-weight: 700;
			border-bottom: 2px solid #a4d7f5;
		}
		.book h2 .more a{
			font-size: 14px;
			font-weight: normal;
			float: right;
			font-style: italic;
			text-decoration: none;
		}
		.blook_con{
			margin-top: 10px;
			padding-top: 15px;
			width: 288px;
			height: 300px;
 			border: 1px solid #a9d9f8;
 			background-color: white;
		}
		.arrow-left {
			    width:0px;
			    height:0px;
			    border-bottom:5px solid transparent;  /* left arrow slant */
			    border-top:5px solid transparent; /* right arrow slant */
			    border-left:5px solid #2f2f2f; /* bottom, add background color here */
			    font-size:0px;
			    line-height:0px;
			    display: inline-block;
			    padding-right: 4px;
			}
		.blook_con li{
			padding-left: 20px;
		    width: 260px;
			height: 30px;
			overflow: hidden;
			white-space: nowrap;/*文本不换行*/
			text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本。*/

		}
		.blook_con li a{
			color: #333;
			font-size: 14px;
			text-decoration: none;
			 font: 40px;
		}
		.trip{
			float: left;
			margin-top: 10px;
			width: 920px;
			height: 480px;
			background: #fff;
			overflow: hidden;
		}
		.trip h2{
			padding-left: 20px;
			height: 60px;
			line-height: 60px;
			font-size: 18px;
			font-weight: 700;
			color: #fff;
			background-color: #0062a5;
		}
		.trip h2 a{
			display: block;
			float: right;
			margin-top: 16px;
			margin-right: 30px;
			padding: 2px 10px;
			line-height: 24px;
			font-size: 14px;
			border-radius: 3px;
			text-decoration: none;
		}
		.trip .tag{
			color: #fff;
			font-style: italic;
			font-weight: normal;
		}
		.trip .tag1{
			background-color: #fea7ca;
			color: #902d54;
		}
		.trip .tag2{
			background-color: #45d2c1;
			color: #004bc1;
		}
		.trip .tag3{
			background-color: #9ce280;
			color: #164d00;
		}
		.trip .tag4{
			background-color: #60bdfe;
			color: #003152;
		}
		.trip .tag5{
			background-color: gold;
			color: #6e5800;
		}
		.tripb{
			width:287px;
			height:368px;
			float: left;
		}
		.tripb .tit{
			width: 287px;
			height: 126px;
			padding-left: 15px;
			padding-right: 15px;
			background-color: #d1e7f4;
		}
		.tripb .tit h3 em{
			font-family: Arial;
			font-size: 32px;
			font-weight: 700;
			color: #0061a4; 
		}
		.tripb .tit h3{
			padding: 10px;
		}
		.tripb .tit span{
			font-size: 12px;
			line-height: 14px;
		}
		.tripb .picture img{
			cursor: pointer;
			width: 317px;
			height: 255px;
		}
		.trip_news{
			width: 603px;
			height: 368px;
			float: right;
		}
		.trip_news ul li{
			margin-left: 20px;
			margin-top: 20px;
			list-style: none;
			padding-bottom: 10px;
			width: 595px;
			border-bottom: 1px dotted #cbcbcb;
		}
		.trip_news ul li div{
			display: block;
			padding-left: 15px;
			width: 400px;
			height: 100px;
			overflow: hidden;
		}
		.trip_news ul li .text{
			width: 400px;
		}
		.trip_news ul li img{
			cursor: pointer;
			float:left;
			width: 160px;
			height: 100px;
		}
		.trip_news  h3 em{
			font-family: Arial;
			font-size: 32px;
			font-weight: 700;
			color: #54a7e3;
		}
		.trip_news ul li span{
			font-size: 12px;
			line-height: 18px;
			color: #737373;
		}
		.introduction{
			float: right;
			margin-top: 10px;
			width: 290px;
			height: 450px;
			overflow: hidden;
		}
		.introduction div img{
			width: 290px;
			height: 140px;
			margin-bottom: 15px;
		}
		.content{
			width: 1230px;
			margin: 20px auto 20px;
			height: 450px;
		}
		.content h1{
			margin-bottom: 20px;
			font-size: 30px;
			font-weight: 700;
			color: #454545;
			line-height: 50px;
			text-align: center;
		}
		.content .cons{
			padding-bottom: 20px;
			width: 1330px;
			overflow: hidden;
			position: relative;
			height: 360px;
		}
		.content .left{
			width: 230px;
			height: 360px;
			margin-right: 20px;
			float: left;
		}
		.content .cons .topimg{
			width: 230px;
			height: 279px;
			
		}
		.content .cons .tag{
			width: 228px;
			height: 79px;
			border: 1px solid #cbcbcb;
			background-color: #fff;
		}
		.topimg{
			width: 230px;
			height: 279px;
			position: relative;
		}
		.topimg img{
			width: 230px;
			height: 279px;
		}
		.topimg span{
			display: block;
			line-height: 20px;
			position:absolute;
			top: 5px;
			left: 15px;
			padding: 3px 5px 0 0;
		}
		.topimg span em{
			color: #fff;
			z-index: 2;
			font:18px "微软雅黑";
			font-weight: 700;
			text-shadow: 2px 2px 2px #333;
		}
		.tag ul{
			width: 216px;
			margin: 6px auto 0;
		}
		.tag ul li{
			list-style: none;
			float: left;
			padding-left: 15px;
			width: 90px;
			font-size: 12px;
			line-height: 20px;
		}
		.recommend{
		  
		}
	        h1{
			margin-bottom: 20px;
			font-size: 30px;
			font-weight: 700;
			color: #454545;
			line-height: 50px;
			text-align: center;
		}
		.recommend ul{
			width: 1250px;
			overflow: hidden;
		}
		.recommend ul li {
			transition: all 0.6s;
		}
		.recommend ul li img{
			cursor: pointer;
			width: 230px;
			height: 230px;
		}
		.recommend ul li:hover{
			transform: scale(1.2);
		}
		.recommend ul li.first img{
			cursor: pointer;
			width: 480px;
			height: 230px;
		}
		.recommend ul li{
			float: left;
			margin-right: 20px;
			margin-bottom: 20px;
			position: relative;
			list-style: none;
		}
		.recommend ul li em{
			position: absolute;
			bottom: 20px;
			left: 20px;
			font-size: 18px;
			line-height: 21px;
			font-style: normal;
			color: #fff;
			text-shadow: 2px 2px 2px #000;
			z-index: 2;
		}
		.lunbo{
			width:1230px;
			height:250px;
			margin:0 auto 20px;
		}
		.remen{
			width:1230px;
			height:560px;
			margin:20px auto 0px;
		}
		.tit_more{
			padding-bottom: 10px;
			text-align: center;
			font-size: 18px;
			font-style: italic;
		}
		.tit_more a{
			color: #1d7aae;
			text-decoration: none;
			width: 100%;
 			display: block;
		}
		.footer{
			width: 100%;
			height: 50px;
			background-color: #002b49;
			margin-top:20px;
		}
	</style>
     <link rel="stylesheet" href="css/缓动动画.css">
     <link rel="stylesheet" href="css/wufenglunbo.css">
</head>
<body>
	<nav>
		<ul>
			<li><a href="#" title="" target="blank">首页</a></li>
			<li><a href="#" title="" target="blank">概况</a></li>
			<li><a href="#" title="" target="blank">旅游资讯</a></li>
			<li><a href="#" title="" target="blank">景区</a></li>
			<li><a href="商城.html" title="" target="blank">商城</a></li>
			<li><a href="#" title="" target="blank">美食</a></li>
			<li><a href="#" title="" target="blank">交通</a></li>
		</ul>
	</nav>
	 <div class="beijing">
	 	<span>平顶山山水甲天下</span>
	 </div>

	<div class="head">
	 	<div class="leftblock">
	 		<h2>平顶山旅游</h2>
			<ul>
				<li><a href="#">节庆活动</a></li>
				<li><a href="#">会议展览</a></li>
				<li><a href="#">旅游攻略</a></li>
				<li><a href="#">旅游贴士</a></li>
				<li><a href="#">图片</a></li>
				<li><a href="#">视频</a></li>
			</ul>
	 	</div>
	 	    
	 <div class="all" id='all'>
	<div class="screen">
        <ul id="ul">
            <li><img src="imgs/3.jpg" /></li>
            <li><img src="imgs/4.jpg" /></li>
            <li><img src="imgs/5.jpg" /></li>
            <li><img src="imgs/6.jpg" /></li>
            <li><img src="imgs/8.jpg" /></li>
        </ul>
    </div>
    </div>
	 <script src="js/缓动动画.js"></script>
	 	<div class="book">
	 		<h2>
	 			<span>最新资讯</span>
                <span class="more"><a href="#">更多资讯></a></span>
	 		</h2>
	 		<div class="blook_con">
	 			<ul>
	 				<li><a href="#"><div class="arrow-left"></div>不断扩大的全国朋友圈</a></li>
	 				<li><a href="#"><div class="arrow-left"></div>大量美图~健康步道预计元旦开放体验来平顶山有课有福了</a></li>
	 				<li><a href="#"><div class="arrow-left"></div>边吃边体验！打开这张美食地图，来一场舌尖上的旅行</a></li>
	 				<li><a href="#"><div class="arrow-left"></div>一城一味，这些熟悉又充满回忆的平顶山老味道，少吃一个都不完美</a></li>
	 				<li><a href="#"><div class="arrow-left"></div>喜讯！“微博2019最具影响力国内游城市”，平顶山登榜！</a></li>
	 				<li><a href="#"><div class="arrow-left"></div>如何文艺度过2019的最后一个月？看完这篇就够了</a></li>
	 				<li><a href="#"><div class="arrow-left"></div>转粉啦！园博苑12月上新，惊艳了时光~</a></li>
	 				<li><a href="#"><div class="arrow-left"></div>如果只能选择一个地方吸霾，我建议你来安阳</a></li>
	 			</ul>
	 		</div>
	 	</div>
	 	</div>

	 <div class="containter">
       <div class="trip">
      	<h2>
      		精品线路
      		 <span> <a href="#" class="tag">其他线路></a></span>
      		<a href="#" class="tag1">周边游</a>
      		<a href="#" class="tag2">自驾游</a>
      		<a href="#" class="tag3">经典文化遗产</a>
			<a href="#" class="tag4">夜游平顶山</a>
			<a href="#" class="tag5">金砖雅游</a>
      	</h2>
		<div class="tripb">
			<div class="tit">
				<h3><em>01</em>古典建筑之旅</h3>
				<span>这里荟萃了汇聚了上千座中西合璧的古代建筑，风格各异的中外建筑，如叶县县衙</span>
			</div>
			<div class="picture"><img src="imgs/叶县.jpg" alt="图片"></div>
		</div>

		   <div class="trip_news">
		   	 <ul>
		   	 	<li>
		   	 			<img src="imgs/平顶山.jpg" alt="">	
		   	 			<div class="text text1">
		   	 				<h3><em>02</em>白天的平顶山</h3>
		   	 				<span>二郎山景区景色秀丽，是国际龙舟赛基地，国家级森林公园，国家皮划艇,
								欢迎您观光旅游，考察投资。
		   	 				</span>
		   	 			</div>
		   	 	</li>
		   	 	<li>
		   	 			<img src="imgs/平顶山1.jpg" alt="">
		   	 			<div class="text text2">
		   	 				<h3><em>03</em>魅力时尚之旅</h3>
		   	 				<span>平顶山位于华中地区，别名鹰城，是中原经济区和重工业基地，还是中国曲艺城、中国书法城、中国观音文化之乡
		   	 				</span>
		   	 			</div>
		   	 	</li>
		   	 	<li>
		   	 		  <img src="imgs/平顶山2.jpg" alt="">
		   	 		  <div class="text text3">
		   	 		  	<h3><em>04</em>中原大佛所在地</h3>
		   	 		  	<span>它是目前世界上最高的佛教造像。景区内的天瑞吉祥金钟净重116吨，是载入《吉尼斯世界纪录大全》的“世界最大外击青铜铸钟”。
		   	 		  	</span>
		   	 		  </div>
		   	 	</li>
		   	 </ul>
		   </div>
       </div>
	 
			<div class="introduction">
				<div class="img1">
					<img src="imgs/介绍1.jpg" alt="图片介绍1">
				</div>
				<div class="img2">
					<img src="imgs/介绍2.jpg" alt="图片介绍2">
				</div>
				<div class="img3">
					<img src="imgs/介绍三.jpg" alt="图片介绍3">
				</div>
			</div>

	 </div>

			<div class="content">
				<h1>————&nbsp&nbsp&nbsp&nbsp旅游向导&nbsp&nbsp&nbsp&nbsp————</h1>
				<div class="cons">
					<div class="left">
					<div class="topimg">
						<img src="imgs/景区.jpg" alt="">
						<span><em>景区</em></span>
					</div>
					<div class="tag">
						<ul>
							<li>5A级景区</li>
							<li>4A级景区</li>
							<li>主题乐园</li>
							<li>文博科教</li>
							<li>遗产古籍</li>
						</ul>
					</div>
				    </div>
				
					<div class="left">
					<div class="topimg">
						<img src="imgs/线路.jpg" alt="">
						<span><em>线路</em></span>
					</div>
					<div class="tag">
						<ul>
							<li>金砖雅游</li>
							<li>自驾游</li>
							<li>夜游平顶山</li>
							<li>周边游</li>
							<li>文化遗产</li>
						</ul>
					</div>
				    </div>

                 <div class="left">
					<div class="topimg">
						<img src="imgs/美食.jpg" alt="">
						<span><em>美食</em></span>
					</div>
					<div class="tag">
						<ul>
							<li>地道美食</li>
							<li>私房佳肴</li>
							<li>海鲜排挡</li>
							<li>午茶晚茶</li>
							<li>养生素菜</li>
						</ul>
					</div>
				    </div>
                
                <div class="left">
					<div class="topimg">
						<img src="imgs/酒店.jpg" alt="">
						<span><em>购物</em></span>
					</div>
					<div class="tag">
						<ul>
							<li>时尚商圈</li>
							<li>特色街区</li>
							<li>地道伴手礼</li>
							<li>跨境海购</li>
							<li>离境退税政策</li>
						</ul>
					</div>
				    </div>

				        <div class="left">
					<div class="topimg">
						<img src="imgs/住宿.jpg" alt="">
						<span><em>酒店</em></span>
					</div>
					<div class="tag">
						<ul>
							<li>5星级酒店</li>
							<li>4星级酒店</li>
							<li>3星级酒店</li>
							<li>高级酒店</li>
							<li>公寓</li>
						</ul>
					</div>
				    </div>

			</div>
		</div>

      <div class="remen">
       	<h1>————&nbsp&nbsp&nbsp&nbsp&nbsp热门推荐&nbsp&nbsp&nbsp&nbsp&nbsp————</h1>
       <div class="recommend">
			<ul>
				<li class="first">
					<img src="imgs/图片9.jpg" alt="">
					<em>漂流</em>
				</li>
				<li>
					<img src="imgs/图片2.jpg" alt="">
					<em>画眉谷</em>
				</li>
				<li>
					<img src="imgs/图片3.jpg" alt="">
					<em>石漫滩水库</em>
				</li>
				<li>
					<img src="imgs/图片4.jpg" alt="">
					<em>孔子</em>
				</li>
				<li>
					<img src="imgs/图片5.jpg" alt="">
					<em>好运谷</em>
				</li>
				<li>
					<img src="imgs/图片6.jpg" alt="">
					<em>石人山</em>
				</li>
				<li>
					<img src="imgs/图片7.jpg" alt="">
					<em>尧山</em>
				</li>
				<li>
					<img src="imgs/图片8.jpg" alt="">
					<em>伏牛山</em>
				</li>
				<li>
					<img src="imgs/图片1.jpg" alt="">
					<em>中原大佛</em>
				</li>
			</ul>
		</div>
		</div>
	
		<div class="lunbo">
		     <h1>————&nbsp&nbsp&nbsp&nbsp&nbsp游记攻略&nbsp&nbsp&nbsp&nbsp————</h1>
		     <span class="tit_more"><a href="#">MORE>></a></span>

		     <div class="sreen" id="scl">
		<ul id="picture">
			<li><img src="imgs/img (1).jpg" alt=""></li>
			<li><img src="imgs/img (2).jpg" alt=""></li>
			<li><img src="imgs/img (3).jpg" alt=""></li>
			<li><img src="imgs/img (4).jpg" alt=""></li>
			<li><img src="imgs/img (6).jpg" alt=""></li>
			<li><img src="imgs/img (5).jpg" alt=""></li>
			<li><img src="imgs/img (7).jpg" alt=""></li>
			<li><img src="imgs/img (8).jpg" alt=""></li>
			<li><img src="imgs/img (9).jpg" alt=""></li>
			<li><img src="imgs/img (10).jpg" alt=""></li>
			<li><img src="imgs/img (1).jpg" alt=""></li>
			<li><img src="imgs/img (2).jpg" alt=""></li>
			<li><img src="imgs/img (3).jpg" alt=""></li>
			<li><img src="imgs/img (4).jpg" alt=""></li>
			<li><img src="imgs/img (5).jpg" alt=""></li>
			<li><img src="imgs/img (6).jpg" alt=""></li>
		</ul>
	   </div>
		</div>
		<script src="js/wufenglunbo.js"></script>
	   <div class="footer">
	   	 yangaoyuan
	   </div>
</body>
</html>